<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>椭圆旋转导航</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f0f0f0;
        }

        .wheel-container {
            position: relative;
            width: 400px;
            height: 300px;
        }

        .nav-item {
            position: absolute;
            width: 60px;
            height: 60px;
            background: #3498db;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            cursor: pointer;
            transition: transform 0.3s;
            text-decoration: none;
            font-family: Arial, sans-serif;
        }

        .nav-item:hover {
            transform: scale(1.1);
            background: #2980b9;
        }

        .center-button {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: #e74c3c;
            border-radius: 50%;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 24px;
        }

        .center-button:hover {
            background: #c0392b;
        }
    </style>
</head>

<body>
    <div class="wheel-container">
        <button class="center-button">菜单</button>
    </div>

    <script>
        class WheelNav {
            constructor(container, items) {
                this.container = container;
                this.items = items;
                this.angle = 0;
                this.init();
            }

            init() {
                this.createItems();
                this.setupRotation();
            }

            createItems() {
                const a = 150; // 椭圆长轴
                const b = 130; // 椭圆短轴

                this.items.forEach((item, index) => {
                    const angle = (2 * Math.PI * index) / this.items.length;
                    const x = a * Math.cos(angle);
                    const y = b * Math.sin(angle);

                    const navItem = document.createElement('a');
                    navItem.className = 'nav-item';
                    navItem.href = item.link || '#';
                    navItem.textContent = item.text;
                    navItem.style.left = `${this.container.offsetWidth / 2 + x - 30}px`;
                    navItem.style.top = `${this.container.offsetHeight / 2 + y - 30}px`;

                    navItem.addEventListener('click', (e) => {
                        e.preventDefault();
                        this.rotateToItem(index);
                    });

                    this.container.appendChild(navItem);
                });
            }

            rotateToItem(targetIndex) {
                const currentIndex = Math.floor((this.angle / 360) * this.items.length) % this.items.length;
                const diff = targetIndex - currentIndex;
                const rotationNeeded = (360 / this.items.length) * diff;

                this.angle += rotationNeeded;
                const navItems = this.container.querySelectorAll('.nav-item');

                navItems.forEach((item, index) => {
                    const angle = (2 * Math.PI * index) / this.items.length + (this.angle * Math.PI / 180);
                    const a = 150;  // 保持与createItems中相同的长轴
                    const b = 130;  // 保持与createItems中相同的短轴
                    const x = a * Math.cos(angle);
                    const y = b * Math.sin(angle);

                    item.style.transition = 'all 0.5s ease-in-out';
                    item.style.left = `${this.container.offsetWidth / 2 + x - 30}px`;
                    item.style.top = `${this.container.offsetHeight / 2 + y - 30}px`;
                });
            }

            setupRotation() {
                const centerButton = this.container.querySelector('.center-button');
                centerButton.addEventListener('click', () => {
                    this.angle += 360 / this.items.length;
                    const navItems = this.container.querySelectorAll('.nav-item');

                    navItems.forEach((item, index) => {
                        const angle = (2 * Math.PI * index) / this.items.length + (this.angle * Math.PI / 180);
                        const a = 150;  // 保持与createItems中相同的长轴
                        const b = 130;  // 保持与createItems中相同的短轴
                        const x = a * Math.cos(angle);
                        const y = b * Math.sin(angle);

                        item.style.transition = 'all 0.5s ease-in-out';
                        item.style.left = `${this.container.offsetWidth / 2 + x - 30}px`;
                        item.style.top = `${this.container.offsetHeight / 2 + y - 30}px`;
                    });
                });
            }
        }

        // 初始化导航
        const container = document.querySelector('.wheel-container');
        const items = [
            { text: '首页', link: '#' },
            { text: '关于', link: '#' },
            { text: '服务', link: '#' },
            { text: '产品', link: '#' },
            { text: '联系', link: '#' }
        ];

        new WheelNav(container, items);
    </script>
</body>

</html>